import React, { Component } from 'react'
import {
  Form,
  JumboTabs,
  Button,
  TabBar,
  Dialog,
  Toast
} from 'antd-mobile'
import {
  BankcardOutline,
  DownCircleOutline,
  FillinOutline,
  ClockCircleOutline,
  
} from 'antd-mobile-icons'
import Footer from '../../components/Footer';
import style from "./index.module.scss"
import { UserLoginApi } from "@/api/user.js";
const tabs = [
  {
    title: '代付款',
    icon: <BankcardOutline />,
  },
  {
    title: '代发货',
    icon: <ClockCircleOutline />
  },
  {
    title: '已发货',
    icon: <DownCircleOutline />

  },
  {
    title: '待评价',
    icon: <FillinOutline />
    
  },
]
export default class index extends Component {
  state = {
    list: [{
      title: "2",
      description: "收藏",
      key: "1"
    },
    {
      title: "1",
      description: "积分",
      key: "2"
    },
    {
      title: "2",
      description: "优惠券",
      key: "3"
    },],
  }
  offRegister = async() => {
      const result = await Dialog.confirm({
        content: '是否退出登录',
      })
      if (result) {
        Toast.show({ content: '退出登录成功', position: 'bottom' })
        sessionStorage.removeItem('user-msg')
        sessionStorage.removeItem('user-token')
        this.props.history.push('/Userlogin')
      } 
    }
     
  render() {
    const phone = JSON.parse(sessionStorage.getItem('user-msg')).phone
    // console.log('phone',phone);
    return (
      <div className={style.personal}>
        <div className={style.top}>
          <div className={style.head}>
            <p></p>
            <span>{phone}</span>
          </div>
          <JumboTabs className={style.JumboTabs}>
            {this.state.list.map(item => (
              <JumboTabs.Tab title={item.title} description={item.description} key={item.key}>
              </JumboTabs.Tab>
            ))}
          </JumboTabs>
          <div className={style.goods}>
            <p><span>我的订单</span><span>查看全部订单</span></p>
            <TabBar className={style.TabBar}>
              {tabs.map((item,index) => (
                <TabBar.Item key={index} icon={item.icon} title={item.title} />
              ))}
            </TabBar>
          </div>
          <p><span>会员中心</span><span>&gt;</span></p>
          <p><span>领劵中心</span><span>&gt;</span></p>
          <p><span>收获地址</span><span>&gt;</span></p>
          <Form
            onFinish={this.offRegister}
            footer={
              <Button block type='submit' color='danger' size='large'>
                退出登录
              </Button>
            }
          ></Form>
        </div>
        <div className={style.bottom}>
          <Footer></Footer>
        </div>
      </div>
    )
  }
}

